<template>
  <div class="my-item">
    <label
      class="my-item_label"
      :style="{ width: lablelWidth + 'px', color: lablelColor }"
    >
      {{ label }}
    </label>
    <div class="my-item_body">
      <slot></slot>

      <div
        v-if="!$slots.default"
        class="flex-box flex-top flex-start flex-wrap"
      >
        <div class="my-item_body_text">
          {{ text }}
        </div>
        <div class="my-item_body_desc" :style="{ color: lablelColor }">
          {{ desc }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      default: "",
    },
    text: {
      type: [String, Number],
      default: "",
    },
    desc: {
      type: [String, Number],
      default: "",
    },
    lablelWidth: {
      type: [String, Number],
      default: "70",
    },
    lablelColor: {
      type: String,
      default: "#7f7f7f",
    },
    textColor: {
      type: String,
      default: "#191919",
    },
    descColor: {
      type: String,
      default: "#7f7f7f",
    },
  },
};
</script>

<style lang="less" scoped>
.my-item {
  display: inline-flex;

  &_label {
    display: inline-block;
  }

  &_body {
    flex: 1;

    // &_text {
    // margin-bottom: 8px;
    // }
  }
}
</style>
